import React, { Component } from 'react';

import RenderMock from './RenderMock';
import ComputeCourse from './ComputeCourse';

import Banner from '../components/Banner';
// import { randomColor } from '../utils/math';
import topics from './Topic/data';
import Topic from './Topic';
import BlockFooter from './BlockFooter';

// import stars from './assets/img/stars.jpeg';

// let style = { background: 'rgb(131, 139, 149)' };
// let style = { background: `url(${ stars })` };
let style = {};
let mark = 'made by Futurer.J';

let copy = [
  topics.slice(0, 8),// 权重计算
  topics.slice(8, 9),// 2 定义
  topics.slice(9, 10),// 3 特殊取值
  topics.slice(10, 11),// 4 end
];

export default class Speech extends Component {
  state = {
    fontSize: 24
  }
  handleClick = (fontSize) => {
    this.setState({
      fontSize
    });
  }
  render() {
    let c = [...copy[0], RenderMock, ...copy[1], ComputeCourse, ...copy[2], ...copy[3]].map((Item, index) => {
    // let c = [ComputeCourse, ...copy[0], RenderMock, ...copy[1], ...copy[2], ...copy[3]].map((Item, index) => {
        if(Item.title || Item.words) {
        return (
          <Banner.Block key={'done-' + index} style={ style } footer={
            <BlockFooter left={index + 1} right={ mark } fontSize={ this.state.fontSize } onChange={ this.handleClick }/>
          }>
            <Topic {...Item}></Topic>
          </Banner.Block>
        );
      }
      return (
        <Banner.Block key={'done-' + index} style={ style } footer={
          <BlockFooter left={index + 1} right={ mark } fontSize={ this.state.fontSize } onChange={ this.handleClick }/>
        }>
          <Item />
        </Banner.Block>
      );
    });

    return (
      <Banner className={"banner--fullscreen"} col={7} row={2} style={ { fontSize: this.state.fontSize } }>
        { c }
      </Banner>
    )
  }
}
